<template>
	<div class="register-wrapper">
		<div class="register-content">
			<div class="register-main">
				<h2 class="register-main-title">用户注册</h2>
				<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
					<el-form-item prop="email">
						<el-input v-model="dataForm.email" placeholder="请输入邮箱">
							<el-button slot="append" @click="sendCode" :disabled="!!timer">
								{{ timer ? `${countdown}s后重试` : '获取验证码' }}
							</el-button>
						</el-input>
					</el-form-item>
					<el-form-item prop="code">
						<el-input v-model="dataForm.code" placeholder="请输入验证码"></el-input>
					</el-form-item>
					<el-form-item prop="userName">
						<el-input v-model="dataForm.userName" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="phone">
						<el-input v-model="dataForm.phone" placeholder="请输入手机号"></el-input>
					</el-form-item>
					<el-form-item prop="roleId">
						<el-select 
							v-model="dataForm.roleId" 
							placeholder="请选择角色"
							style="width: 100%"
							@focus="getRoles">
							<el-option
								v-for="item in roleOptions"
								:key="item.id"
								:label="item.roleName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="dataForm.password" type="password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item prop="confirmPassword">
						<el-input v-model="dataForm.confirmPassword" type="password" placeholder="请确认密码"></el-input>
					</el-form-item>
					
					<el-form-item style="text-align: center;">
						<el-row type="flex" justify="center" :gutter="20">
							<el-col :span="12">
								<el-button class="register-btn-submit" type="primary" @click="dataFormSubmit()" style="width: 100%;">注册</el-button>
							</el-col>
							<el-col :span="12">
								<el-button type="primary" plain @click="$router.push({ name: 'Login' })" style="width: 100%;">去登录</el-button>
							</el-col>
						</el-row>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
import { registerByEmail, sendEmailCode, getRoleList } from '@/http/modules/admin.js'

export default {
	data() {
		const validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'))
			} else {
				if (this.dataForm.confirmPassword !== '') {
					this.$refs.dataForm.validateField('confirmPassword')
				}
				callback()
			}
		}
		const validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.dataForm.password) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		const validatephone = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入手机号'))
			} else if (!/^1[3-9]\d{9}$/.test(value)) {
				callback(new Error('请输入正确的手机号'))
			} else {
				callback()
			}
		}
		return {
			dataForm: {
				email: '',
				code: '',
				userName: '',
				phone: '',
				password: '',
				confirmPassword: '',
				roleId: ''
			},
			timer: null,
			countdown: 0,
			roleOptions: [],
			dataRule: {
				email: [{
					required: true,
					message: '请输入邮箱',
					trigger: 'blur'
				}, {
					type: 'email',
					message: '请输入正确的邮箱格式',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '请输入验证码',
					trigger: 'blur'
				}],
				userName: [{
					required: true,
					message: '请输入用户名',
					trigger: 'blur'
				}],
				phone: [{
					required: true,
					validator: validatephone,
					trigger: 'blur'
				}],
				password: [{
					required: true,
					validator: validatePass,
					trigger: 'blur'
				}],
				confirmPassword: [{
					required: true,
						validator: validatePass2,
						trigger: 'blur'
				}],
				roleId: [{
					required: true,
					message: '请选择角色',
					trigger: 'change'
				}]
			}
		}
	},
	methods: {
		// 发送验证码
		async sendCode() {
			try {
				await this.$refs.dataForm.validateField('email')
				await sendEmailCode(this.dataForm.email)
				this.$message.success('验证码发送成功')
				this.countdown = 60
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			} catch (error) {
				this.$message.error(error.message || '验证码发送失败')
			}
		},
		// 获取角色列表
		async getRoles() {
			try {
				const res = await getRoleList()
				if (res.data.code === 200) {
					this.roleOptions = res.data.data
				}
			} catch (error) {
				this.$message.error('获取角色列表失败')
			}
		},
		// 提交注册表单
		async dataFormSubmit() {
			try {
				await this.$refs.dataForm.validate()
				const registerData = {
					email: this.dataForm.email,
					code: this.dataForm.code,
					userName: this.dataForm.userName,
					phone: this.dataForm.phone,
					password: this.dataForm.password,
					roleId: this.dataForm.roleId
				}
				const res = await registerByEmail(registerData)
				if (res.data.code === 200) {
					this.$message.success('注册成功')
					this.$router.push({ name: 'Login' })
				} else {
					this.$message.error(res.data.data || '注册失败')
				}
			} catch (error) {
				this.$message.error(error.message || '注册失败')
			}
		}
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	}
}
</script>
<style scoped>
	.register-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		background: linear-gradient(
			45deg, 
			#667eea 0%, 
			#764ba2 25%, 
			#6b48c7 50%, 
			#4f46e5 75%, 
			#6366f1 100%
		);
		background-size: 400% 400%;
		animation: gradientBG 15s ease infinite;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	@keyframes gradientBG {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}

	.register-content {
		position: relative;
		z-index: 2;
		width: 420px;
		padding: 2.5rem;
		background: rgba(255, 255, 255, 0.98);
		border-radius: 20px;
		box-shadow: 0 15px 35px rgba(0,0,0,0.2);
		transform: translateY(0);
		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		backdrop-filter: blur(10px);
	}

	.register-content:hover {
		transform: translateY(-5px);
		box-shadow: 0 25px 45px rgba(0,0,0,0.25);
	}

	.register-main-title {
		text-align: center;
		margin-bottom: 2rem;
		font-size: 1.8rem;
		font-weight: 700;
		color: #0f172a;
		position: relative;
		text-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	.register-main-title::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 3px;
		background: #4f46e5;
		border-radius: 2px;
	}

	.el-form-item {
		margin-bottom: 1.5rem;
	}

	.register-content ::v-deep .el-input__inner {
		height: 48px;
		border-radius: 10px;
		border: 2px solid #cbd5e0;
		transition: all 0.3s ease;
		font-size: 14px;
		padding-left: 40px;
		background: rgba(255,255,255,0.9);
		color: #2d3748;
	}

	.register-content ::v-deep .el-input__inner::placeholder {
		color: #64748b;
	}

	.register-content ::v-deep .el-input__inner:focus {
		border-color: #4f46e5;
		box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
	}

	.register-content ::v-deep .el-input__prefix {
		left: 12px;
		color: #a0aec0;
		transition: all 0.3s ease;
	}

	.register-content ::v-deep .el-input:hover .el-input__prefix {
		color: #4f46e5;
	}

	.register-btn-submit {
		background: linear-gradient(135deg, #4f46e5, #6366f1);
		border: none;
		height: 48px;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.5px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}

	.register-btn-submit::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		background: linear-gradient(
			90deg,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,0.15) 50%,
			rgba(255,255,255,0) 100%
		);
		animation: shine 1.5s infinite;
	}

	@keyframes shine {
		100% {
			left: 100%;
		}
	}

	.el-button--primary.is-plain {
		border: 2px solid #4f46e5;
		color: #000000;
		background: #f1f5f9;
		padding: 12px 24px;
		border-radius: 12px;
		font-weight: 700;
		letter-spacing: 0.5px;
		position: relative;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 2px 6px rgba(79,70,229,0.1);
	}

	.el-button--primary.is-plain:hover {
		background: #e2e8f0;
		color: #000000;
		transform: translateY(-2px);
		box-shadow: 
			0 4px 12px rgba(79,70,229,0.2),
			0 0 0 2px rgba(79,70,229,0.1);
	}

	.el-button--primary.is-plain span {
		text-shadow: 
			0 1px 1px rgba(255,255,255,0.8),
			0 1px 3px rgba(0,0,0,0.2);
	}

	.el-button--primary.is-plain::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2px;
		background: 
			linear-gradient(
				90deg,
				rgba(79,70,229,0) 0%,
				#4f46e5 50%,
				rgba(79,70,229,0) 100%
			);
		transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.el-button--primary.is-plain::before {
		content: '';
		position: absolute;
		top: -20%;
		left: -20%;
		width: 140%;
		height: 140%;
		background: 
			radial-gradient(
				circle at 50% 50%,
				rgba(79,70,229,0.1) 0%,
				rgba(79,70,229,0) 70%
			);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.el-button--primary.is-plain:hover::before {
		opacity: 1;
	}

	/* 新增图标装饰 */
	.register-content ::v-deep .el-form-item__content::before {
		content: '';
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-family: 'element-icons' !important;
		color: #94a3b8;
		z-index: 2;
	}

	.register-content ::v-deep .el-form-item.prop-email .el-form-item__content::before { content: "\E6E3"; }
	.register-content ::v-deep .el-form-item.prop-code .el-form-item__content::before { content: "\E6E2"; }
	.register-content ::v-deep .el-form-item.prop-userName .el-form-item__content::before { content: "\E6B3"; }
	.register-content ::v-deep .el-form-item.prop-phone .el-form-item__content::before { content: "\E723"; }
	.register-content ::v-deep .el-form-item.prop-password .el-form-item__content::before { content: "\E6C2"; }

	/* 加载动画 */
	@keyframes ripple {
		to {
			transform: scale(4);
			opacity: 0;
		}
	}

	.register-btn-submit:active::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		background: rgba(255,255,255,0.3);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: ripple 0.6s ease-out;
	}

	/* 下拉框样式 */
	.register-content ::v-deep .el-select-dropdown {
		background-color: rgba(17, 34, 52, 0.9);
		border: 1px solid rgba(64, 158, 255, 0.3);
		backdrop-filter: blur(20px);
	}

	/* 下拉选项样式 */
	.register-content ::v-deep .el-select-dropdown__item {
		color: #ffffff;
		height: 40px;
		line-height: 40px;
	}

	/* 加深悬停时的背景色 */
	.register-content ::v-deep .el-select-dropdown__item.hover,
	.register-content ::v-deep .el-select-dropdown__item:hover {
		background-color: rgba(64, 158, 255, 0.35) !important;  /* 加深背景色 */
	}

	/* 选中项的样式 */
	.register-content ::v-deep .el-select-dropdown__item.selected {
		color: #409EFF;
		font-weight: bold;
		background-color: rgba(64, 158, 255, 0.15);
	}

	/* 新增输入框聚焦效果 */
	.register-content ::v-deep .el-input.is-active .el-input__inner {
		border-color: #4f46e5;
		box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
	}

	/* 新增输入框标签 */
	.register-content ::v-deep .el-form-item__label {
		display: block;
		margin-bottom: 8px;
		color: #334155;
		font-weight: 500;
		font-size: 14px;
	}

	/* 新增按钮容器布局 */
	.register-content ::v-deep .el-form-item:last-child .el-row {
		gap: 16px;
		margin-top: 32px;
	}

	/* 优化按钮文字 */
	.el-button {
		font-family: 'Inter', system-ui, -apple-system, sans-serif;
		letter-spacing: -0.02em;
	}
</style> 